<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- v-else不能单独使用需要配合 v-if使用
    -->
  <div id="app">
    <p v-if="gender===1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else="score>=70">成绩评定B：奖励周末郊游</p>
    <p v-else="score>=60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>

  <script src="./vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 1,
        score: 80
      }
    })
    // if (app.gender === 1) {
    //   console.log('男');
    // } else {
    //   console.log('女');
    // }
    // if (app.score >= 90) {
    //   console.log('奖励电脑一台');
    // } else if (app.score >= 70) {
    //   console.log('奖励周末郊游');
    // } else if (app.score >= 60) {
    //   console.log('奖励零食礼包');
    // } else {
    //   console.log('惩罚一周不能玩手机');
    // }
  </script>

</body>

</html>